<template>
  <div>
    <!-- <div style="width:1000px;border:1px solid #ddd">
      <u-form ref="form" :list="JSon" :model="model"></u-form>
      <a-button @click="validate">校验</a-button>
    </div> -->
    <div style="width:1000px;border:1px solid #ddd">
      <u-form
        :layout="{
          span: 12,
          labelCol: 6,
          wrapperCol: 12,
        }"
        ref="formaa"
        :list="JSon"
        :model="model"
        :showCount="30"
      ></u-form>
      <a-button @click="validate">校验</a-button>
      <a-button @click="find">查找组件</a-button>
    </div>
  </div>
</template>

<script>
import custom from "@/components/custom.vue";
const JSon = [
  {
    type: "Input",
    label: "输入框1",
    options: {
      type: "text",
      width: "100%",
      defaultValue: "",
      placeholder: "请输入",
      clearable: false,
      maxLength: null,
      hidden: false,
      disabled: false,
    },
    model: "input_1619405689850",
    rules: ["required", "phone"],
  },
  {
    type: "Select",
    label: "下拉选择器",

    options: {
      width: "100%",
      multiple: false,
      disabled: false,
      clearable: false,
      hidden: false,
      placeholder: "请选择111",
      dynamicKey: "",
      dynamic: false,
      options: [
        {
          value: "",
          label: "请选择",
        },
        {
          value: "1",
          label: "下拉框1",
        },
        {
          value: "2",
          label: "下拉框2",
        },
      ],
      showSearch: false,
    },
    model: "select_1619405737149",
    rules: [
      {
        required: true,
        message: "必填项111",
      },
    ],
  },
  {
    type: "Number",
    label: "数字输入框",
    options: {
      width: "100%",
      min: 0, //
      max: 10, //
      precision: null,
      step: 1,
      hidden: false,
      disabled: false,
      placeholder: "请输入ddd",
    },
    model: "number_1619405691382",
    rules: [
      {
        required: true,
        message: "必填项",
      },
    ],
  },
  {
    type: "Date",
    label: "日期选择框",
    options: {
      width: "100%",
      rangeDefaultValue: [],
      range: "date",
      showTime: false,
      disabled: false,
      hidden: false,
      clearable: false,
      placeholder: "date----",
      rangePlaceholder: "大撒大撒",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD",
    },
    model: "date_1619405741417",
    rules: [
      {
        required: true,
        message: "必填项",
      },
    ],
  },
  {
    type: "Date",
    label: "月份选择框",
    options: {
      width: "100%",
      rangeDefaultValue: [],
      range: "Month",
      showTime: false,
      disabled: false,
      hidden: false,
      clearable: false,
      placeholder: "date----",
      rangePlaceholder: "大撒大撒",
      format: "YYYY-MM",
      valueFormat: "YYYY-MM",
    },
    model: "Month_1619405741417",
    rules: ["required"],
  },
  {
    type: "Date",
    label: "时间范围选择框",
    options: {
      width: "100%",
      rangeDefaultValue: ["1995-02-03", "2080-03-01"],
      range: "Range",
      showTime: false,
      disabled: false,
      hidden: false,
      clearable: false,
      placeholder: ["请选择开始日期ddd", "请选择结束日期aaa"],
      rangePlaceholder: ["请选dsaas择开始日期ddd", "请选dsa择结束日期aaa"],
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD",
    },
    model: "Range_1619405741417",

    rules: ["required"],
  },

  {
    type: "Radio",
    label: "单选框",

    options: {
      disabled: false,
      hidden: false,
      defaultValue: "",
      dynamicKey: "",
      dynamic: false,
      options: [
        {
          value: "1",
          label: "选项1",
        },
        {
          value: "2",
          label: "选项2",
        },
        {
          value: "3",
          label: "选项3",
        },
      ],
    },
    model: "radio_1619405728779",
    rules: [
      {
        required: true,
        message: "必填项",
      },
    ],
  },
  {
    type: "Checkbox",
    label: "多选框",

    options: {
      disabled: false,
      hidden: false,
      defaultValue: [],
      dynamicKey: "",
      dynamic: false,
      options: [
        {
          value: "1",
          label: "选项1",
        },
        {
          value: "2",
          label: "选项2",
        },
        {
          value: "3",
          label: "选项3",
        },
      ],
    },
    model: "checkbox_1619405732853",
    rules: [
      {
        required: true,
        message: "必填项",
      },
    ],
  },
  //   {
  //     type: "uploadFile",
  //     label: "上传文件",
  //     icon: "icon-upload",
  //     options: {
  //       defaultValue: "[]",
  //       multiple: false,
  //       disabled: false,
  //       hidden: false,
  //       drag: false,
  //       downloadWay: "a",
  //       dynamicFun: "",
  //       width: "100%",
  //       limit: 3,
  //       data: "{}",
  //       fileName: "file",
  //       headers: {},
  //       action: "http://cdn.kcz66.com/uploadFile.txt",
  //       placeholder: "上传"
  //     },
  //     model: "uploadFile_1619405745335",
  //     key: "uploadFile_1619405745335",
  //     help: "",
  //     rules: [
  //       {
  //         required: false,
  //         message: "必填项"
  //       }
  //     ]
  //   },
  {
    type: "Cascader",
    label: "级联选择器",
    options: {
      disabled: false,
      hidden: false,
      showSearch: false,
      placeholder: "请选择",
      clearable: false,
      dynamicKey: "",
      dynamic: true,
      options: [
        {
          value: "1",
          label: "选项1",
          children: [
            {
              value: "11",
              label: "选项11",
            },
          ],
        },
        {
          value: "2",
          label: "选项2",
          children: [
            {
              value: "22",
              label: "选项22",
            },
          ],
        },
      ],
    },
    model: "cascader_1619405748156",
    rules: [
      {
        required: true,
        message: "必填项",
      },
    ],
  },
  {
    type: "Switch",
    label: "开关",

    options: {
      defaultValue: true,
      hidden: false,
      disabled: false,
      "checked-children": "1",
      "un-checked-children": "0",
    },
    model: "switch_1619405751155",
    rules: [
      {
        required: true,
        message: "必填项",
      },
    ],
  },
  //   {
  //     type: "button",
  //     label: "按钮",
  //     icon: "icon-button-remove",
  //     options: {
  //       type: "primary",
  //       handle: "submit",
  //       dynamicFun: "",
  //       hidden: false,
  //       disabled: false
  //     },
  //     key: "button_1619405752471"
  //   },
  {
    type: "Text",
    label: "文字",
    icon: "icon-zihao",
    options: {
      textAlign: "left",
      hidden: false,
      showRequiredMark: false,
    },
    model: "text_1619405751155",
  },
  //   {
  //     type: "alert",
  //     label: "警告提示",
  //     icon: "icon-zu",
  //     options: {
  //       type: "success",
  //       description: "",
  //       showIcon: false,
  //       banner: false,
  //       hidden: false,
  //       closable: false
  //     },
  //     key: "alert_1619405757843"
  //   }
  {
    type: "custom", //自定义组件
    label: "自定义组件案例",
    options: {
      type: "success",
      description: "",
      showIcon: false,
      banner: false,
      hidden: false,
      closable: false,
    },
    component: custom, // 必须 当type: "custom"时 ,必须传入一个组件
    model: "alert_1619405757843", // 传入键名称
    rules: [
      // 传入校验规则
      {
        required: true,
        message: "必填项",
      },
    ],
  },
  {
    type: "customTorsoDictionary",
    label: "业务相关组件案例",
    icon: "icon-zu",
    options: {
      type: "success",
      description: "",
      showIcon: false,
      banner: false,
      hidden: false,
      closable: false,
    },
    key: "customTorsoDictionary_1619405757843",
    model: "customTorsoDictionary_1619405757843", // 传入键名称
    options: {
      code: "customTorsoDictionary_1619405757843",
    },
    rules: [
      // 传入校验规则
      "required",
    ],
  },

  {
    type: "Textarea",
    label: "业务相关组件案例",
    icon: "icon-zu",
    layout: {
      span: 24,
      labelCol: 3,
      wrapperCol: 12,
    },
    options: {
      type: "success",
      description: "",
      showIcon: false,
      banner: false,
      hidden: false,
      closable: false,
    },
    key: "Textarea_1619405757843dd",
    model: "Textarea_1619405757843dd", // 传入键名称
    rules: [
      // 传入校验规则
      "required",
    ],
  },
];

export default {
  components: { custom },
  data() {
    return {
      JSon,
      formFormat: [],
      model: {
        input_1619405689850: "ddd",
        select_1619405737149: "1",
        number_1619405691382: 1,
        date_1619405741417: "2021-05-24",
        Month_1619405741417: "2021-05",
        Range_1619405741417: [],
        radio_1619405728779: "1",
        alert_1619405757843: "dasd",
        checkbox_1619405732853: [],
        cascader_1619405748156: [],
        switch_1619405751155: true,
        text_1619405751155: "这是文字,.,.,.,.,.,.,.",
        customTorsoDictionary_1619405757843: "",
        Textarea_1619405757843dd: "dasd1",
      },
    };
  },
  methods: {
    validate() {
      console.log("this.$refs.form.validate()");
      console.log(this.$refs.formaa.validate());
    },
    // 根据model的值查找组件
    find() {
      console.log(
        this.$refs.formaa.findComponent(
          "alert_1619405757843"
        )
      );
    },
  },
  created() {
    // console.log("00000000000000000");
    // setTimeout(() => {
    //   console.log("00000000000000000");
    //   this.JSon[4].options.options.push({
    //     label: "ddd",
    //     value: "ff"
    //   });
    //   // this.$forceUpdate();
    //   console.log("this.JSon[4].options.options");
    //   console.log(this.JSon[4].options.options);
    // }, 3000);
    // setTimeout(() => {
    //   console.log("00000000000000000");
    //   this.JSon[5].options.options.push({
    //     label: "ddsaddd",
    //     value: "fdasdf"
    //   });
    //   // this.$forceUpdate();
    //   console.log("this.JSon[5].options.options");
    //   console.log(this.JSon[5].options.options);
    // }, 1000);
  },
};
</script>

<style></style>
